import React from "react";

const ChildComponent = ({ users, deleteUser }) => {

    const handleDeleteUser = (id) => {
        deleteUser(id);
    }

    return (
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {
                    users.map((item) => {
                        return (
                            <tr key={item.id}>
                                <td>{item.id}</td>
                                <td>{item.username}</td>
                                <td>{item.password}</td>
                                <td>
                                    <button onClick={() => handleDeleteUser(item.id)}>删除</button>
                                </td>
                            </tr>
                        )
                    })
                }
            </tbody>
        </table>
    );
}

export default ChildComponent;